<template>
  <CityHeader :title="title"/>
   <div class="current-city">
      <h3>当前定位城市</h3>
     <div>{{cityStore.city}}</div>
   </div>
  <div class="change-city">选择城市</div>
  <van-index-bar>
    <div v-for="(value,key,index) in CityJson.city_list" :key="index">
        <van-index-anchor :index="key" />
        <van-cell :title="item.city" v-for="(item,cityIndex) in  CityJson.city_list[key]" :key="cityIndex" @click="onChangeCity(item.city)" />
    </div>
  </van-index-bar>
</template>

<script setup lang="ts">
import CityJson from "@/assets/json/city_list.json";
import {useRouter} from "vue-router";
import {useCityStore} from "@/store/City";
import CityHeader from "@/components/PubHeaderComponent.vue";
const router=useRouter()
const cityStore=useCityStore()
const title="城市选择"
const onChangeCity=(city:string)=>{
  cityStore.city=city
  router.back()
}
</script>


<style scoped lang="less">
.current-city{
  background: #fff;
  margin:10px 0;
  padding:10px;
  h3{
    font-size:14px;
    font-weight: 400;
    color: #999;
  }
  div{
    font-size: 14px;
    margin-top: 15px;
  }
}
.change-city{
  background: #fff;
  margin:10px 0;
  padding:10px;
}
</style>